<template>
  <div id="app">
    <inputSomething @sendTodoList="getTodoList"></inputSomething>
    <doSomething :dataList="dataList" ></doSomething>
    <finish-number :dataList="dataList" :deleteAllTodo="deleteAll"></finish-number>
  </div>
</template>

<script>
//引入组件
import inputSomething from './components/input-something.vue'
import doSomething from './components/do-something.vue'
import finishNumber from "@/components/finish-number.vue";
export default {
  name: 'App',
  data(){
    return{
      //判断缓存内是否有dataList 如果没有则是空数组
      dataList:JSON.parse(localStorage.getItem('dataList')) || [],
    }
  },

  methods:{
    //添加子组件
    getTodoList(value){
      // 使用some来检查是否已经有相同的work值
      if (this.dataList.some(item => item.work === value.work)) {
        alert('您已经添加过了 请重新输入');
        return; // 如果找到重复项，直接返回，不再继续执行
      }
      // 如果没有找到重复项，则添加新的value
      this.dataList.unshift(value);
    },
    //删除单个子组件
    deleteWork(value){
       this.dataList.forEach((item,index)=>{
           if(item.id === value.id){
              //根据子组件传过来的id判断
              this.dataList.splice(index,1)
           }
       })
    },
    //删除勾选中中的全部组件
    deleteAll(){
       //筛选出没有被勾选的
       this.dataList = this.dataList.filter(item=>{
          return !item.done
       })
    }
  },

  //对数据进行监视 进行本地存储
   watch:{
    //默认监视的表层 没办法监视深层 因为要监视done的变化
    dataList:{
      deep:true,
       handler(val){
          localStorage.setItem('dataList',JSON.stringify(val))
       }
    }

  },

   //mounted钩子接收 事件总线传过来的数据
   mounted() {
    //获取子组件删除的数据
    this.$bus.$on('deleteItem',this.deleteWork)
    //改变单选框
    this.$bus.$on('changeChecked',(data)=>{
      this.dataList.forEach((item)=>{
        if(item.id === data.id){
          item.done = !item.done
        }
      })
    })

  },
  //注册组件
  components:{inputSomething,doSomething,finishNumber}
}
</script>

<style scoped>
#app{
  width: 400px;
  margin: 50px auto;
  padding: 15px 15px 20px 15px;
  box-sizing: border-box;
  border: 1px solid #E3E3E3FF;
  border-radius: 5px;
}
</style>
